<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>值班表</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/LogCss.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->
    <div th:replace="~{commons/header::header}"></div>

    <!-- left -->
    <div th:replace="~{commons/instructorLeft::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body" id="app">
        <template>
            <div>
                <el-button style="position: absolute;right: 500px;" type="primary" @click="click()">换班申请</el-button>
                <el-calendar style="height:500px" v-model="value">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div @click="isSelected(data,dealMyDate(data.day))"
                             style="width:100%;height:100%;"
                             :class="dealMyDate(data.day)?'isSelectedclass':''">
                              <span :class="data.isSelected ? 'is-selected' : ''">
                                  {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
                              </span><br>
                            <span class="is-selected">{{dealMyDate(data.day)}}</span>
                        </div>
                    </template>
                </el-calendar>
            </div>
        </template>
        <el-dialog
                title="换班申请"
                :visible.sync="dialogVisible"
                width="30%"
                :modal-append-to-body='false'>
            <el-form  :model="ruleForm"  ref="ruleForm" label-width="92px">
                <el-form-item label="申请人">
                    <el-input v-model="form.SQR" disabled></el-input>
                </el-form-item>
                <el-form-item label="原值班时间" prop="oldDate">
                    <el-select v-model="form.oldDate" placeholder="请选择">
                        <el-option
                                v-for="item in oldDate"
                                :key="item.extraTime"
                                :label="item.extraTime"
                                :value="item.extraTime">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="现值班时间" prop="newDate">
                    <el-select v-model="form.newDate" placeholder="请选择"  @change="selectOne">
                        <el-option
                                v-for="item in newDate"
                                :key="item.extraTime"
                                :label="item.extraTime"
                                :value="item.extraTime">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="被换班人" prop="HBR">
                    <el-select v-model="form.HBR" placeholder="请选择">
                        <el-option
                                v-for="item in HBR"
                                :key="item.staName"
                                :label="item.staName"
                                :value="item.staName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="换班原因" prop="HBYY">
                    <el-input type="textarea" v-model="form.HBYY"></el-input>
                </el-form-item>
                <el-form-item>
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>

<script type="text/babel">
    layui.use('element', function() {
        var element = layui.element;
    });
    new Vue({
        el:"#app",
        data:{
            value: new Date(),
            dialogVisible: false,
            staff:[],
            form:{
                SQR:"",
                oldDate:"",
                newDate:"",
                HBR:"",
                HBYY:""
            },
            oldDate:[],
            newDate:[],
            HBR:[],

            data:[],

            ruleForm: {
                HBYY: '',
                newDate: '',
                oldDate: '',
                HBR: ''
            },
            rules: {
                HBYY : [
                    { required: true, message: '请填写换班原因', trigger: 'blur' }
                ],
                newDate: [
                    { type: 'date', required: true, message: '请选择现换班时间', trigger: 'change' }
                ],
                oldDate: [
                    { type: 'date', required: true, message: '请选择原换班时间', trigger: 'change' }
                ],
                HBR: [
                    { required: true, message: '请选择被换班人', trigger: 'change' }
                ]
            }
        },
        created: function() {
            this.$nextTick(() => {
                // 点击前一个月
                let prevBtn = document.querySelector(
                    ".el-calendar__button-group .el-button-group>button:nth-child(1)"
                );
                prevBtn.addEventListener("click", e => {
                    this.prevBtnmonth(this.value);
                });
                //点击下一个月
                let nextBtn = document.querySelector(
                    ".el-calendar__button-group .el-button-group>button:nth-child(3)"
                );
                nextBtn.addEventListener("click", () => {
                    this.nextBtnmonth(this.value);
                });
                //点击今天
                let todayBtn = document.querySelector(
                    ".el-calendar__button-group .el-button-group>button:nth-child(2)"
                );
                todayBtn.addEventListener("click", () => {
                    this.todayBtnmonth(this.value);
                });
            });
        },
        mounted(){
            this.getExtra();
            this.getStaff();
        },
        methods: {
            prevBtnmonth(ins) {
                console.log("上个月按钮事件");
                console.log(ins);
            },
            nextBtnmonth(ins) {
                console.log("下个月按钮事件");
                console.log(ins);
            },
            todayBtnmonth(ins) {
                console.log("今天按钮事件");
                console.log(ins);
            },
            // 是否选中日期
            isSelected(ins, ins2) {
            },
            dealMyDate(day) {
                let len = this.data.length;
                let res = "";
                for (let i = 0; i < len; i++) {
                    if (this.data[i].extraTime == day) {
                        //遍历extraStaffList
                        for (let j = 0; j < this.data[i].extraStaffList.length; j++) {
                            res = res+this.data[i].extraStaffList[j].staName;
                        }
                    }
                }
                return res;
            },
            click(){
                //获取申请人
                var _this = this;
                axios.get("http://localhost:8443/get_sqr").then(function (response) {
                    _this.form.SQR = response.data.staName;
                },function (err) {})
                //获取原值班时间
                axios.get("http://localhost:8443/get_sqr_date").then(function (response) {
                    _this.oldDate = response.data;
                },function (err) {})
                //获取现在要换班的时间
                axios.get("http://localhost:8443/get_all_date").then(function (response) {
                    _this.newDate = response.data;
                },function (err) {})
                this.dialogVisible = true;
            },
            selectOne(event, item) {     //change 触发事件
                var _this = this;
                let params = new URLSearchParams();
                params.append('date', event);
                //值班表添加数据
                axios.post("http://localhost:8443/select_by_date",params).then(function (response) {
                    _this.HBR = response.data;
                },function (err) {})
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        this.dialogVisible = false;
                        //提交表单
                        let SQR = this.form.SQR;
                        let oldDate = this.form.oldDate;
                        let newDate = this.form.newDate;
                        let HBR = this.form.HBR;
                        let HBYY = this.form.HBYY;
                        let SFSH = '0';
                        let params = new URLSearchParams();
                        params.append('SQR', SQR);
                        params.append('oldDate', oldDate);
                        params.append('newDate', newDate);
                        params.append('HBR', HBR);
                        params.append('HBYY', HBYY);
                        params.append('SFSH', SFSH);
                        console.log(params)
                        //值班表添加数据
                        axios.post("http://localhost:8443/change_work",params).then(function (response) {
                        },function (err) {})
                    } else {
                        //
                    }
                });
            },


            getExtra:function () {
                var _this = this;
                axios.get("http://localhost:8443/extra_index2").then(function (response) {
                    _this.data = response.data;
                },function (err) {
                    console.log(err);
                })
            },
            getStaff:function () {
                var _this = this;
                axios.get("http://localhost:8443/get_all_staff").then(function (response) {
                    _this.staff = response.data;
                },function (err) {
                    console.log(err);
                })
            }
        }
    })
</script>
</body>
</html>